<template>
    <div class="plot-tools">
        <el-button-group>
            <el-button v-for="tool in plotTools" :key="tool.type" :type="activeTool === tool.type ? 'primary' : ''"
                @click="selectTool(tool.type)" :icon="tool.icon">
                {{ tool.name }}
            </el-button>
        </el-button-group>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { PlotTypes } from '../plot/PlotTypes';

const props = defineProps({
    activeTool: String
});

const emit = defineEmits(['tool-selected']);

const plotTools = ref([
    { type: PlotTypes.POINT, name: '点标', icon: 'Location' },
    { type: PlotTypes.POLYLINE, name: '线标', icon: 'Connection' },
    { type: PlotTypes.POLYGON, name: '面标', icon: 'Select' },
    { type: PlotTypes.CIRCLE, name: '圆形', icon: 'CirclePlus' },
    { type: PlotTypes.RECTANGLE, name: '矩形', icon: 'Box' },
    { type: PlotTypes.ARC, name: '弓形', icon: 'Share' },
    { type: PlotTypes.ELLIPSE, name: '椭圆', icon: 'Stamp' },
    { type: PlotTypes.CURVE, name: '曲线', icon: 'TrendCharts' },
    { type: PlotTypes.CLOSED_CURVE, name: '闭合曲面', icon: 'Finished' },
    { type: PlotTypes.SECTOR, name: '扇形', icon: 'PieChart' },
    { type: PlotTypes.GATHERING_PLACE, name: '集结地', icon: 'Position' },
    { type: PlotTypes.FINE_ARROW, name: '细直箭头', icon: 'ArrowRight' },
    { type: PlotTypes.ASSAULT_DIRECTION, name: '进攻方向', icon: 'DArrowRight' },
    { type: PlotTypes.ATTACK_ARROW, name: '进攻方向(尾)', icon: 'Right' },
    { type: PlotTypes.TAILED_ATTACK_ARROW, name: '战斗行动', icon: 'TopRight' },
    { type: PlotTypes.SQUAD_COMBAT, name: '分队战斗行动', icon: 'BottomRight' },
    { type: PlotTypes.STRAIGHT_ARROW, name: '粗单直箭头', icon: 'ArrowRightBold' },
    { type: PlotTypes.DOUBLE_ARROW, name: '双箭头', icon: 'Switch' },
    { type: PlotTypes.FREE_LINE, name: '自由线', icon: 'EditPen' },
    { type: PlotTypes.FREE_POLYGON, name: '自由面', icon: 'Crop' },
    { type: PlotTypes.RECTANGLE_FLAG, name: '斜矩形1', icon: 'CopyDocument' },
    { type: PlotTypes.RECTANGLE_FLAG2, name: '斜矩形2', icon: 'CopyDocument' },
    { type: PlotTypes.TEXT_BOX, name: '文本框', icon: 'Document' },
    // { type: PlotTypes.TEXT_LABEL, name: '文本标注', icon: 'Document' },
    // 新增类型
    { type: PlotTypes.RECT_FLAG, name: '矩形标志旗', icon: 'Flag' },
    { type: PlotTypes.TRIANGLE_FLAG, name: '三角标志旗', icon: 'Flag' },
    { type: PlotTypes.CURVE_FLAG, name: '曲线标志旗', icon: 'Flag' },
]);

const selectTool = (toolType) => {
    emit('tool-selected', toolType === props.activeTool ? null : toolType);
    console.log('选择的工具:', toolType);
};
</script>

<style scoped>
.plot-tools {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
}

.el-button-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.el-button {
    margin: 0 !important;
}
</style>